<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>ppt</title>
    <meta name="author" content="Bartek Szopka" />
    <link href="../css/ppt.css" rel="stylesheet" />
</head>
<body class="impress-not-supported">

<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

<div id="impress">

    <div id="bored" class="step slide" data-x="-1000" data-y="-1500">
		<h2>课题分析</h2>
		<h3>cases</h3>
		<h4>随着网民规模与互联网普及率的提升，我国电子商务得到了迅速发展，电子商务经历了三个阶段:B2B(商家对商家)的模式，B2C(商家对顾客)模式，O2O(线上对线下)模式。与此同时，我国餐饮行业的成长却不太乐观，经营成本的不断增加是中小型企业严重的负担。例如，房租、人工费用、原材料成本这些越来越高高，然而企业的利润越来越低，这些因素成为中小型餐饮企业主要的负担。于是，出现了像“饭是钢”，“饿了吗”等外卖服务的网站，这些网站为中小型餐饮企业提供了O2O模式的平台。然而，这些平台功能复杂，不适合中小型餐饮企业，特别是小型餐厅。对于中小型餐厅需要一个操作简便，逻辑流程复杂度不高的O2O平台。</h4>
		<h3>conclusions</h3>
		<h4>零入驻成本、操作便捷、逻辑简单</h4>
    </div>

    <div class="step slide" data-x="0" data-y="-1500">
        <h2>开发环境</h2>
		<ul class='list'>
			<li>Node.js<span class='break'>---</span>服务器语言</li>
			<li>MongoDB<span class='break'>---</span>数据库</li>
			<li>Express<span class='break'>---</span>服务器框架</li>
			<li>Vue.js<span class='break'>---</span>模板渲染绑定</li>
			<li>Bootstrap<span class='break'>---</span>CSS框架</li>
		</ul>
    </div>

    <div class="step slide" data-x="1000" data-y="-1500">
		<h2>设计核心</h2>
		<ul class='list'>
			<li>交互密集型->Node.js</li>
			<li>SESSION?->Oauth</li>
			<li>传统路由层?->RESTful api</li>
			<li>MVC?->MVVM</li>

		</ul>
    </div>

    <div id="title" class="step" data-x="0" data-y="0" data-scale="4">
        <span class="try">为什么选用node.js做服务器</span>
        <h3>交互密集型WEB应用，更好的处理高并发。</h3>
        <h4>1.使用npm管理包依赖。</h4>
        <h4>2.使用中间件的设计思想。</h4>
        <h4>3.使用promise处理异步回调。</h4>
    </div>

    <div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
        <span class="try">使用token而不使用session</span>
        <h4>1.跨域(Authorization header)。</h4>
        <h4>2.状态无关(服务器无状态)。</h4>
        <h4>3.可扩展性(多端适用)。</h4>
        <h4>4.安全(crsf攻击)。</h4>
    </div>

    <div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
        <p>更有效的抽象方式 <b>REST</b> <span class="thoughts">接口通用性</span></p>
    </div>

    <div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
        <p>服务器是<b class="scaling">无状态的</b></p>
    </div>

    <div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
        <p class="rest_des">REST提供了一组架构约束，当作为一个整体来应用时，强调组件交互的可伸缩性、接口的通用性、组件的独立部署、以及用来减少交互延迟、增强安全性、封装遗留系统的中间组件。</p>
    </div>

    <div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
        <p><b class="imagination">MVVM</b></p>
    </div>

    <div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
        <p>严格意义上讲，MVVM是MVC模式的子集</p>
        <q>MVC可以理解为<a>Request->Controller->Model->View</a></q>
        <q>MVVM则是<a>Request->Controller->Model->ViewModel->View</a></q>
    </div>

    <div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
        <p>将页面渲染层逻辑从后端抽取到前端，将View层和ViewModel层双向绑定</p>
    </div>

    <div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-200" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
        <p><b>谢谢答辩老师观看</b></p>
        <span class="footnote">敬请指正</span>
    </div>

    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
    </div>

</div>

<div class="hint">
    <p>基于WEB的外卖订餐配送系统设计</p>
</div>
<script src="../js/libs/impress.js"></script>
<script>impress().init();</script>

</body>
</html>


